<template>
	<view>
		<u-navbar :is-back="true" title="编辑资料"></u-navbar>
		<view class="content">
			<view class="baoming-form">
				<view class="baoming-form-cell">
					<view class="baoming-cell-title">设置头像</view>
					<view class="baoming-cell-input">
						<image :src="info.face" mode="aspectFill" style="width: 32rpx; height: 32rpx;" v-if="info.face"></image>
						<image src="/static/img/charutupian.png" mode="aspectFill" style="width: 32rpx; height: 32rpx;" v-else></image>
						<text style="color: #989898; margin-left: 30rpx;" @click="handleUpload" hover-class="cell-hover" :hover-stay-time="50">上传照片</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="baoming-form">
				<view class="baoming-form-cell">
					<view class="baoming-cell-title">昵称设置</view>
					<view class="baoming-cell-input">
						<input type="text" placeholder="设置你的昵称" v-model="info.nickname" placeholder-style="font-size:24rpx;" />
					</view>
				</view>
				<view class="baoming-form-cell">
					<view class="baoming-cell-title">性别</view>
					<view class="baoming-cell-input">
						<text>{{info.sex}}</text>
						<image src="../../static/img/acitivity/xuanze.png" style="width: 48rpx; height: 48rpx;" @click="actionSheetShow = true"></image>
					</view>
				</view>
				<view class="baoming-form-cell">
					<view class="baoming-cell-title">年龄</view>
					<view class="baoming-cell-input">
						<input type="number" placeholder="年龄" v-model="info.age" placeholder-style="font-size:24rpx;" />
					</view>
				</view>
				<view class="baoming-form-cell">
					<view class="baoming-cell-title">地区</view>
					<view class="baoming-cell-input">
						<text>{{info.province}}{{info.city}}</text>
						<image src="../../static/img/acitivity/xuanze.png" style="width: 48rpx; height: 48rpx;" @click="pickerShow = true"></image>
					</view>
				</view>
				<view class="baoming-form-cell">
					<view class="baoming-cell-title">毕业院校</view>
					<view class="baoming-cell-input">
						<input type="text" placeholder="请输入毕业院校" v-model="info.school" placeholder-style="font-size:24rpx;" />
					</view>
				</view>
				<view class="baoming-form-cell">
					<view class="baoming-cell-title">学历</view>
					<view class="baoming-cell-input">
						<input type="text" placeholder="请输入您的学历" v-model="info.degree" placeholder-style="font-size:24rpx;" />
					</view>
				</view>
				<view class="baoming-form-cell">
					<view class="baoming-cell-title">所在公司</view>
					<view class="baoming-cell-input">
						<input type="text" placeholder="所在公司" v-model="info.company" placeholder-style="font-size:24rpx;" />
					</view>
				</view>
				<view class="baoming-form-cell">
					<view class="baoming-cell-title">职位</view>
					<view class="baoming-cell-input">
						<input type="text" placeholder="所担任职位" v-model="info.position" placeholder-style="font-size:24rpx;" />
					</view>
				</view>
				
			</view>
		</view>
		<view class="foot-btn">
			<u-button shape="circle" class="shimingrenzheng" hover-class="none" :hair-line="false">去实名认证</u-button>
			<u-button shape="circle" class="xiugaiziliao" hover-class="none" :hair-line="false" @click="doedit()">修改资料</u-button>
		</view>
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
		<tarBer :totarBer='tar'></tarBer>
	</view>
</template>

<script>
	import tarBer from '../../components/tabBarFoot/tabBarFoot.vue'
	import config from '../../config/index.js';
	import { mapMutations,mapState } from 'vuex';
	export default {
		components:{
				 tarBer
			 },
		data() {
			return {
				nickname:'哈哈哈',
				isOpen:false,
				tar:{
						color:'#fff',
						id:1		 
				},
				actionSheetList: [
					{
						text: '男',
					},
					{
						text: '女',
					},
					{
						text: '保密',
					}
				],
				actionSheetShow: false,
				pickerShow: false,
				info:{
					'face'    :'',
					'nickname':'哈哈哈哈',
					'sign'    :'个性签名',
					'no'      :'000001',
					'sex'     :'男',
					'age'     :18,
					'school'  :'xx大学',
					'province':'北京',
					'city'    :'海淀',
					'company' :'无',
					'position':'无',
					'degree'  :'本科',
					'video_num':0,
					'post_num' :0,
					'activity_num':0
				},
			};
		},
		computed: {
			...mapState('user',['token','userInfo']),
		},
		onLoad() {
			if(!this.token){
				uni.navigateTo({
					url:'/pages/user/login/code'
				})
				return;
			}
			this.info = this.userInfo;
		},
		methods:{
			...mapMutations('user',['setToken','setUserInfo']),
			doedit(){
				this.$ajax.post('member/upinfo',this.info).then(data=>{
					this.$api.msg(data.msg);
					this.setUserInfo(this.info);
				})
			},
			actionSheetCallback(index){
				let sex= this.actionSheetList[index].text;
				if(this.info.sex!=sex)
				this.info.sex =sex ;
			},
			regionConfirm(e){
				this.info.province = e.province.label;
				this.info.city     = e.city.label;
			},
			// 上传头像
			handleUpload() {
				let that = this;
			    uni.chooseImage({
			    count: 1,
			    success: res => {
					const tempFilePaths = res.tempFilePaths;
					// TODO 上传
					that.face = tempFilePaths[0];
					const uploadTask = uni.uploadFile({
					      url : config.baseURL+'member/upload',
					      filePath: tempFilePaths[0],
					      name: 'file',
						  formData: {
							'token': that.token
						  },
					      success: function (uploadFileRes) {
							  if(200==uploadFileRes.statusCode){
								  that.info.face =uploadFileRes.data;
							  }else{
								  that.$api.msg('上传失败');
							  }  
					      },
						  fail: (err) => {
							that.$api.msg('上传失败');
						 }
					});
			    },
				error : function(e){
					that.$api.msg('上传失败');
				}
			  });
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #e6e6e6;
}
.content{
	margin-top: 20rpx;
}
.baoming-form{
	background-color: #FFFFFF;
	margin-top: 30rpx;
	.baoming-form-cell{
		padding: 30rpx 70rpx;
		border-bottom: 1px solid #ebebeb;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.baoming-cell-title{
			font-size: 24rpx;
			color: #515151;
		}
		.baoming-cell-input{
			text-align: right;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			input{
				margin-bottom: 0;
				font-size: 24rpx;
			}
		}
	}
}
.foot-btn{
	display: flex;
	margin-top: 20rpx;
	.shimingrenzheng{
		background-color: #aaaaaa;
		color: #FFFFFF;
	}
	.xiugaiziliao{
		background-color: #2ea34a;
		color: #FFFFFF;
		width: 340rpx;
	}
}
</style>
